<template>
  <!-- 人员弹窗 -->
  <a-modal
    :footer="false"
    centered
    :title="headerTitle"
    :visible.sync="dialogVisible"
    width="1200px"
    @cancel="handleCancel"
  >
    <a-row :gutter="10">
      <!-- 侧边栏 -->
      <a-col
        :span="6"
        style="border-right: 1px solid #d9d9d9"
      >
        <!-- 公司组织树搜索 -->
        <tree-organization
          v-if="dialogVisible"
          ref="treeOrganization"
          :auto-select="false"
          :project-dept-org-id="projectDeptOrgId"
          :selected-keys.sync="selectedKeys"
          :select-options.sync="selectOptions"
          @loader="search"
        />
      </a-col>
      <!-- 主内容 -->
      <a-col :span="18">
        <a-input-search
          v-model="key"
          placeholder="请输入员工名称/电话号码"
          class="mb12"
          :max-length="30"
          @search="search"
        />
        <a-button
          :disabled="rowSelection.selectedRowKeys.length < 1"
          type="primary"
          icon="plus"
          @click="handleAddMore"
        >
          批量添加
        </a-button>
        <!-- 表格 -->
        <s-table
          v-if="dialogVisible"
          ref="table"
          :scroll="{ y: 300 }"
          table-layout="fixed"
          size="default"
          :row-key="(row) => row.id || row.employeeId"
          :columns="columns"
          :row-selection="rowSelection"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          show-pagination="auto"
        >
          <!-- 表格操作栏 -->
          <span
            slot="actions"
            slot-scope="text, record"
          >
            <template>
              <a
                :disabled="record.isAdd"
                @click="handleSubmit(record)"
              >{{
                record.isAdd ? '已添加' : '添加'
              }}</a>
            </template>
          </span>
        </s-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
// import { getOrgsTree } from '@/api/subassembly/TreeSelectOrganization' // api
import cloneDeep from 'lodash.clonedeep' // 深拷贝
import {
    getOrgsTree,
    getStaffAll,
    getOrgsTreeList,
    getOrgEmployeesList,
} from '@/api/subassembly/TreeSelectOrganization'
export default {
    components: {
        STable,
        TreeOrganization,
    },
    props: {
        // 显隐控件
        visible: {
            type: Boolean,
            default() {
                return false
            },
        },
        projectDeptOrgId:{
          type: String,
            default() {
                return ''
            },
        },
        // 表单
        form: {
            type: Object,
            default() {
                return {}
            },
        },
        // 标题
        headerTitle: {
            type: String,
            default() {
                return '添加参会人员'
            },
        },
        // 列表api
        api: {
            type: Object,
            default() {
                return {}
            },
        },
        // 列表api请求axios
        loadList: {
            type: String,
            default() {
                return 'getList'
            },
        },
        meetingEmployeeDTOListData: {
            type: Array,
            default() {
                return []
            },
        },
    },
    computed: {
        // 树节点api
        apiTree() {
            return { getOrgsTree }
        },
        // 与父组件绑定visible
        dialogVisible: {
            get: function () {
                return this.visible
            },
            set: function (e) {
                this.$emit('update:visible', e)
            },
        },
        // 表格列表请求参数
        args() {
            let args = {orgPath:'53085e2c9f1f4685801ef31994f57c49'}
            // 添加树节点id
            if (this.selectedKeys.length > 0) {
                args.orgPath = this.selectedKeys[0]
            }
            // 若表单不为空
            if (Object.keys(this.form)?.length) {
                Object.assign(args, this.form)
            }
            // 若关键词存在
            this.key && (args.key = this.key)
            return args
        },
    },
    data() {
        return {
            queryParam: {},
            key: '',
            selectedKeys: {},
            // 表格复选框配置
            rowSelection: {
                selectedRowKeys: [],
                onChange(selectedRowKeys, selectedRows) {
                    this.selectedRowKeys = selectedRowKeys
                    this.selectedRows = selectedRows
                },
                getCheckboxProps: (record) => ({
                    props: {
                        disabled: record.isAdd ,
                    },
                }),
            },
            currentPage:1,
            loadData: (parameter) => {

                // if (this.args.orgId) {
                    const requestParameters = Object.assign({}, parameter, this.args)
                    return getStaffAll(requestParameters).then((res) => {
                        let obj = {}
                        obj.currentPage = requestParameters.pageNo
                        obj.pageSize = requestParameters.pageSize
                        obj.totalPage = Math.ceil(res.data.length / requestParameters.pageSize)
                        obj.totalSize = res.data.length
                        obj.data = res.data
                        obj.data.forEach((item) => {
                            item.isAdd = false

                            this.meetingEmployeeDTOListData?.forEach((i) => {
                                if (item.id == i.id) {
                                    item.isAdd = true
                                }
                            })
                        })
                        console.log(obj)

                        return obj
                    })
                // }
            },
            columns: [
                {
                    title: '员工名称',
                    dataIndex: 'name',
                },

                {
                    title: '电话号码',
                    dataIndex: 'phone',
                },

                {
                    title: '操作',
                    dataIndex: 'actions',
                    width: '100px',
                    scopedSlots: { customRender: 'actions' },
                },
            ],
            selectOptions: {},
        }
    },
    methods: {

        handleAddMore() {
          let list = [];
            this.rowSelection.selectedRows.forEach((item) => {
              if (!item.isAdd) {
                   item.isAdd = true
                   list.push(item)
              }

            })
          // this.$refs.table.refresh(false)
            this.$emit('confirms', list)

        },
        // 头部搜索
        search() {
            console.log('aaa')
            this.$refs.table.refresh(true)
        },
        handleSubmit(record) {
            let that = this
            record.isAdd = true
            this.$refs.table.refresh(false)

            that.$emit('confirm', record)
        },
        handleCancel() {
            this.dialogVisible = false
        },
    },
    watch: {
        visible(e) {
            if (e) {
                !this.$refs.treeOrganization &&
                    this.$nextTick(() => {
                        this.$refs.treeOrganization.getList()
                    })
                this.$nextTick(() => {
                    this.rowSelection.selectedRows = []
                    this.$refs.table.refresh(true)
                })
            } else {
                // 初始化表单

                this.key = ''
            }
        },
    },
}
</script>
